<template>
	<div class="blogArticle">
		 <div class="article">
            <div class="article-content">
              <h1> {{articleText.blogTitle}}</h1>
              <p>
                <img src="../assets/images/author.png">
                <span class="author" style="margin-right:20px">{{articleText.blogAuthor}}</span>
              	 <img src="../assets/images/time.png">
              	 <span>{{articleText.time}}</span>

              	 <span class="watch">
              	 	<img src="../assets/images/watch.png">
              	 	{{watchNum+1}}
              	 </span>
              </p>
              <div class="article-text" v-html="articleText.blogText">
                   

              </div>
            </div>
            <blogComment></blogComment>
		 </div>

		 <blogContentRight></blogContentRight>  
	</div>
    

</template>
<style scoped>
    .article-text{
    	text-align: left;
       line-height: 30px;
       margin-top: 24px
    }
    .watch{
    	display: inline-block;
    	margin-left: 16px
    }
	.blogArticle{
	    width: 1120px;
	    margin: 20px auto;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    padding-top: 120px;
	}
	.watch img{
		margin-right: 5px
	}
	.article-content>p{
		color: #999;
		font-size: 14px;
		margin-top: 15px
	}
	.article-content>p img{
		width: 16px;
		vertical-align: middle;
		margin-right: 2px;

	}
	.article{
        width: 70%;
        background: white
	}
	.article-content{
		padding: 20px;
	}
	.article-content h1{
		font-size: 20px;
	}
</style>
<script>
  import blogContentRight from './blogContentRight'
  import blogComment from '../components/blogComment'

  export default {
    name: 'App',
    data () {
        return {
           articleText:'',
           watchNum:0
        }
    },
    created(){
         this.initArticle(this.$route.params.watchNum);        
     },
     methods:{
          initArticle(id) {
                this.$http({
                       method: "get", 
                       url: this.url +'/articles/articlesContent?id='+id,
                })
                 .then(res => {
                     if(res.data.code == 200){
                          this.articleText = res.data.result;
                          this.watchNum = res.data.result.watchNum;
                          this.watchNumF(this.$route.params.watchNum);
                     }else{
                     	  this.$message({
        					          message: '请求失败',
        					          type: 'error'
        				          });  
                     }
                }).catch((err) => {
                     this.$message({
				          message: '请求失败',
				          type: 'error'
				     });  
		       })
          },
          watchNumF(id) {
          	   let watchNum = this.watchNum + 1;
          	   let param = {
          	   	   id: id,
                   watchNum : watchNum
          	   };
          	   this.$http({
                       method: "put", 
                       url: this.url +'/articles/'+id +'/'+watchNum,
                })
                 .then(res => {
                     if(res.data.code == 200){
                          console.log(res.data)
                     }
                })
          }
    },
    components: {
       blogContentRight: blogContentRight,
       blogComment : blogComment
    }
  }
</script>
